<script setup lang="ts">
/*
使用方法:让数字滚动,传入一个数字即可
<x-count-to :value="counter">
 文档:https://github.com/PanJiaChen/vue-countTo
 */
import {CountTo} from 'vue3-count-to';
import {usePrevious} from '@vueuse/core'

const props = withDefaults(defineProps<{
  value: number,
  duration?: number
}>(), {
  value: 0,
  duration: 1000
})
const endVal = computed(() => {
  return props.value
})
const startVal = usePrevious(endVal)


</script>

<template>
  <CountTo class="my-count" :startVal="startVal || endVal" :endVal="endVal" :duration="duration"></CountTo>
</template>

<style scoped lang="scss">
.my-count {
  font-size: 1.2em;
  font-weight: 500;
  display: inline-block;
  width: 6em;
}
</style>